<template>
  <div>
    <!-- 查询条件 -->
    <a-card title="S1 范围碳排放数据查询" bordered style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col span="10">
          <a-form-item label="时间范围">
            <a-range-picker v-model="dateRange" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col span="4">
          <a-button type="primary" @click="searchData">查询</a-button>
          <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 碳排放数据统计 -->
    <a-card title="S1 范围碳排放数据统计" bordered style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col span="6">
          <a-card>
            <p>累计碳排量</p>
            <h2>{{ totalEmissions }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>本月碳排量</p>
            <h2>{{ monthlyEmissions }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>环比碳排量</p>
            <h2>{{ monthOnMonthChange }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>同比碳排量</p>
            <h2>{{ yearOnYearChange }} 吨</h2>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 本月各排放源占比图 -->
    <a-card title="本月各排放源占比" bordered style="margin-bottom: 10px">
      <a-row>
        <a-col span="12">
          <a-card title="占比图" bordered style="margin-right: 5px">
            <div style="height: 396px">
              <echart :option="sourceProportionOption" name="sourceProportionOption" />
            </div>
          </a-card>
        </a-col>
        <a-col span="12">
          <a-card title="详细数据" bordered style="margin-left: 5px">
            <a-table
              :dataSource="sourceDetails"
              :columns="sourceColumns"
              rowKey="source"
              style="min-height: 332px; max-height: 396px"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 本月各排放类型占比图 -->
    <a-card title="本月各排放类型占比 (S1 细化)" bordered>
      <a-row>
        <a-col span="12">
          <a-card title="占比图" bordered style="margin-right: 5px">
            <div style="height: 396px">
              <echart :option="typeProportionOption" name="typeProportionOption" />
            </div>
          </a-card>
        </a-col>
        <a-col span="12">
          <a-card title="详细数据" bordered style="margin-left: 5px">
            <a-table
              :dataSource="typeDetails"
              :columns="typeColumns"
              rowKey="type"
              style="min-height: 332px; max-height: 396px"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Echart from "../../../../../components/e-chart.vue"; // 自定义饼图组件

// 查询条件
const dateRange = ref(null);

// 数据统计
const totalEmissions = ref(5000); // 累计碳排放量
const monthlyEmissions = ref(300); // 本月碳排放量
const monthOnMonthChange = ref(20); // 环比碳排放量变化
const yearOnYearChange = ref(100); // 同比碳排放量变化

// 本月各排放源占比数据
const sourceProportionData = ref([
  { name: "自控燃烧设备", value: 45 },
  { name: "工艺过程直排", value: 30 },
  { name: "自营交通工具", value: 25 },
]);

// 本月各排放源详细数据
const sourceDetails = ref([
  { source: "自控燃烧设备", emissions: "135 吨", proportion: "45%" },
  { source: "工艺过程直排", emissions: "90 吨", proportion: "30%" },
  { source: "自营交通工具", emissions: "75 吨", proportion: "25%" },
]);

// 本月各排放源详细表格列
const sourceColumns = [
  { title: "排放源", dataIndex: "source", key: "source" },
  { title: "碳排放量", dataIndex: "emissions", key: "emissions" },
  { title: "占比", dataIndex: "proportion", key: "proportion" },
];

// 本月各排放类型占比数据
const typeProportionData = ref([{ name: "S1", value: 100 }]);

// 本月各排放类型详细数据
const typeDetails = ref([{ type: "S1", emissions: "300 吨", proportion: "100%" }]);

// 本月各排放类型详细表格列
const typeColumns = [
  { title: "排放类型", dataIndex: "type", key: "type" },
  { title: "碳排放量", dataIndex: "emissions", key: "emissions" },
  { title: "占比", dataIndex: "proportion", key: "proportion" },
];

// 本月各排放源占比图表配置
const sourceProportionOption = {
  title: { text: "本月各排放源占比", left: "center" },
  tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" },
  legend: { orient: "vertical", left: "left" },
  series: [
    {
      name: "排放源占比",
      type: "pie",
      radius: "50%",
      data: sourceProportionData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

// 本月各排放类型占比图表配置
const typeProportionOption = {
  title: { text: "本月各排放类型占比", left: "center" },
  tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" },
  legend: { orient: "vertical", left: "left" },
  series: [
    {
      name: "排放类型占比",
      type: "pie",
      radius: "50%",
      data: typeProportionData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

// 查询和重置功能
const searchData = () => {
  // 执行查询逻辑
};

const resetForm = () => {
  dateRange.value = null;
};
</script>

<style scoped>
a-layout {
  background: #f0f2f5;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

a-button {
  margin-top: 16px;
}

h2 {
  color: #1890ff;
  font-weight: bold;
}
</style>
